<style lang="less">
    @import '../main.less';
</style>

<template>
    <div ref="scrollCon" class="tags-outer-scroll-con">
        <div ref="scrollBody" class="tags-inner-scroll-body" style="left: 0px">
            <Tag
                    type="dot"
                    v-for="item in routerList"
                    ref="tagsPageOpened"
                    :key="item.name"
                    :name="item.name"
                    @click.native="linkTo(item)"
                    :color="item.name===currentPageName?'blue':'default'"
            ><Icon :type="item.icon"></Icon>&nbsp;{{ item.title }}

            </Tag>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import VueI18n from 'vue-i18n';

    Vue.use(VueI18n);
    export default {
        name: 'tagsPageOpened',
        data() {
            return {
                routerList:this.$store.state.app.routers[1].children,
                currentPageName: this.$route.name
            };
        },
        mounted() {
//            this.routerList = this.$store.state.app.routers[1].children;
//            for (var i in this.routerList) {console.log(this.routerList[i].name ,this.$route.name)
//                if (this.routerList[i].name === this.$route.name) {
//                    this.$store.commit('setCurrentPageTitle', this.routerList[i].title);
//                    return;
//                }
//            }
        },
        methods: {
            linkTo(item, name) {
                this.$router.push(item);
            }
        },
        watch: {
            '$route' (to) {
                this.currentPageName = to.name;
            }
        }
    };
</script>